<template>
  <div class="i-box">
    <nav-bar hint="导航栏">
      <div slot="middle">房贷计算</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <cube-tab-bar
      class="i-cube"
      hint="切换贷款来源"
      v-model="selectedLabelDefault"
      :data="tabs"
      show-slider
      @click="clickHandler"
    />
    <div hint="还款方式选择" class="gi-radios radios">
      <div class="gi-radio-item">还款方式</div>
      <div class="gi-radio-item">
        <input type="radio" id="type1" name="love" v-model="type" value="0">
        <label for="type1">等额本息</label>
      </div>
      <div class="gi-radio-item">
        <input type="radio" id="type2" name="love" v-model="type" value="1">
        <label for="type2">等额本金</label>
      </div>
    </div>

    <loan-item prefix="商业" ref="bus" v-show="selectedLabelDefault!=='公积金贷款'"/>
    <loan-item prefix="公积金" ref="gong" v-show="selectedLabelDefault!=='商业贷款'"/>


    <submit-button class="i-submit" @submit="submit" tip="开始计算"></submit-button>
  </div>
</template>

<script>
  import NavBar from "@/components/common/NavBar";
  import InputItem from "@/components/common/InputItem";
  import LoanItem from "@/components/house/LoanItem";
  import SubmitButton from "@/components/common/SubmitButton";

  export default {
    name: "HouseLoan",
    data() {
      return {
        tabs: [{
          label: '商业贷款',
        }, {
          label: '公积金贷款',
        }, {
          label: '组合贷款',
        }],
        selectedLabelDefault: '商业贷款',
        type: '0',
        gong: {
          money: 0,
          rate: 3.25,
          times: 0
        },
        bus: {
          money: 0,
          rate: 4.65,
          times: 0
        }
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      clickHandler(label) {

      },
      submit() {
        let gMoney = parseFloat(this.$refs.gong.money)
        let gRate = parseFloat(this.$refs.gong.rate)
        let gTimes = parseFloat(this.$refs.gong.times)
        let bMoney = parseFloat(this.$refs.bus.money)
        let bRate = parseFloat(this.$refs.bus.rate)
        let bTimes = parseFloat(this.$refs.bus.times)
        let tip = ''
        if (this.selectedLabelDefault !== '商业贷款') {
          if (isNaN(gMoney) || gMoney < 1 || gMoney > 10000) {
            tip = '贷款金额输入有问题，请检查'
          }
          if (isNaN(gRate) || gRate < 1 || gRate > 10) {
            tip = '利率输入有问题，请检查'
          }
        }else{
          //商业贷款，没必要传公积金的数据
          gMoney=0
          gTimes=1
          gRate=0
        }
        if (this.selectedLabelDefault !== '公积金贷款') {
          if (isNaN(bMoney) || bMoney < 1 || bMoney > 10000) {
            tip = '贷款金额输入有问题，请检查'
          }
          if (isNaN(bRate) || bRate < 1 || bRate > 10) {
            tip = '利率输入有问题，请检查'
          }
        }else{
          //公积金贷款，没必要传商贷的数据
          bTimes=1
          bMoney=0
          bRate=0
        }
        if (tip.length > 1) {
          this.$createToast({
            time: 2000,
            type: 'text',
            txt: tip,
          }).show()
          return
        }
        let type = this.type
        let pa = {
          gMoney, gRate, gTimes, bMoney, bRate, bTimes,type
        }
        console.log(pa);
        this.$router.push({
          name:'LoanResult',
          params:pa
        })
      }
    },
    components: {
      NavBar,
      InputItem,
      LoanItem,
      SubmitButton
    },
    created() {

    },
  }
</script>

<style scoped>
  .i-box {

  }

  .radios {
    margin-top: 1rem;
    text-align: left;
    padding-left: 2rem;
  }


</style>
<style>
  .cube-tab_active > div {
    color: var(--color-high-text);
  }

  .i-cube > .cube-tab-bar-slider {
    box-sizing: border-box;
    background-color: var(--color-high-text);
  }
</style>

